<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/waiter' }" style="font-size:24px">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/choose'}" style="font-size:24px">业绩查询</el-breadcrumb-item>
      </el-breadcrumb>

       <el-card style="font-size:24px  ;text-align:center" :data="options">
  <div >
     <div class="block">
    <span class="demonstration"></span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
  </div>

  </div>
</el-card>

      <!--表单区域-->
         <el-table :data="orderList" border stripe height="600">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.pay_status">已付款</el-tag>
            <el-tag type="danger" size="mini" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="桌号" prop="table_number"></el-table-column>
        <el-table-column label="下单时间" prop="create_time"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
            
            <el-tooltip
              class="item"
              effect="dark"
              content="修改订单"
              :enterable="false"
              placement="top"
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="showEditDialog(scope.row.id)"
            ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="删除订单"
              :enterable="false"
              placement="top"
            >
              <el-button
               type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="removeUserById(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
       
      </el-table>
       
      <!-- 订单列表 -->

    </div>
</template>

<script>
import {requestData} from "../../ajax";
export default {
  name: "Home",

  data:function() {
   return {
        orderList: [],
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      }
 },
 mounted:function(){
        // 准备条件
        var request_data = new FormData();
        // 请求数据
        requestData("get","order.json", request_data).then((resp)=>{
            // 赋值数据到linesdata
            var result = resp.data;
            this.orderList = result["finished_order"];
        });
        
    },

  methods: {
    //退出
    signout() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$router.push({ path: "/login.html" });
      });
    },

    //编辑订单信息
     async showEditDialog (id) {
      const { data: res } = await this.$http.get('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('查询用户信息失败！')
      }
      this.editUserForm = res.data
      this.editDialogVisible = true
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed () {
      this.$refs.editUserFormRef.resetFields()
    },

   
    // 删除订单
    async removeUserById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该订单, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除订单')
      }
      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error('删除订单失败！')
      this.$message.success('删除订单成功！')
      this.getUserList()
    },
  },


};
</script>
<style scoped>
.el-table{
  color:rgb(134, 96, 46)
}
.el-breadcrumb{
    margin-bottom: 15px;
    font-size:15px;
}
</style>

